<template>
  <div class="ordermain">
    <el-row style="margin-bottom: 20px">
      <el-col :span="6" :offset="16">
        <div class="search">
          <el-input
            v-model="orderId"
            placeholder="请输入订单编号"
            style="width: 75%"
          ></el-input
          ><el-button
            type="primary"
            style="width: 20%; float: right"
            @click="searchOrder"
            >搜索</el-button
          >
        </div>
      </el-col>
    </el-row>
    <el-empty description="加载中..." v-if="empty"></el-empty>
    <div class="orderinfo" v-for="item in userOrderInfo" :key="item.oid">
      <el-row :gutter="0">
        <el-col :span="8"
          ><div class="grid-content">
            订单编号：<span>{{ item.oid }}</span>
          </div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content">
            下单人：<span>{{ item.uid }}</span>
          </div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content">
            下单时间：<span>{{ item.otime }}</span>
          </div></el-col
        >
      </el-row>
      <el-row :gutter="0">
        <el-col :span="8"
          ><div class="grid-content">
            车位所在小区：<span>{{ item.vid }}</span>
          </div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content">
            车位编号：<span>{{ item.pid }}</span>
          </div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content">
            订单状态：<span>{{ orderStatus(item.state) }}</span>
          </div></el-col
        >
      </el-row>
      <el-row :gutter="0">
        <el-col :span="8"
          ><div class="grid-content">
            订单总金额：<span>{{ item.price }}￥</span>
          </div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content">
            <span
              class="topay"
              v-if="item.state == 2"
              @click="topay(item.uid,item.oid)"
              >支付尾款</span
            >
          </div></el-col
        >
      </el-row>
    </div>
    <el-dialog title="提示" :visible.sync="payVisible" width="30%">
      <span>查询到该订单有优惠券，是否使用?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="pay">直接支付</el-button>
        <el-button type="primary" @click="paying">使用并支付</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userOrderInfo: [],
      orderId: "",
      empty: true,
      payVisible: false,
      payId: "",
      couId: "",
    };
  },
  mounted() {
    this.getAllOrder();
  },
  methods: {
    pay() {
      this.$http
        .get(this.baseURL + "/order/pay", {
          params: {
            id: this.payId,
          },
        })
        .then((res) => {
          this.$message({
            showClose: true,
            message: res.data.message,
            type: "info",
          });
          this.userOrderInfo = [];
        });

      this.payVisible = false;
      setTimeout(() => {
        this.getAllOrder();
      }, 500);
    },
    paying() {
      console.log(this.couId)
      this.$http
        .post(this.baseURL + "/coupon/useDiscount", {
            oid: this.payId,
            cid: this.couId,
        })
        .then((res) => {
          if(res.data.flag) this.pay();
          else this.$message.error(res.data.message)
        });
      this.payVisible = false;
    },
    topay(uid,oid) {
      this.payId = oid;
      this.$http
        .get(this.baseURL + "/coupon/findByUID", {
          params: {
            id: uid,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.data.length != 0) {
            this.payVisible = true;
            console.log(res.data.data[0])
            this.couId = res.data.data[0].cid;
          } else {
            this.$confirm("未查询到该订单有优惠券，是否使用?", "提示", {
              confirmButtonText: "直接支付",
              cancelButtonText: "取消支付",
            })
              .then(() => {
                this.pay();
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消支付",
                });
              });
          }
        });
    },
    searchOrder() {
      this.userOrderInfo = [];
      this.empty = true;
      if (this.orderId == "") {
        this.getAllOrder();
      } else {
        this.$http
          .get(this.baseURL + "/order/findById", {
            params: {
              id: this.orderId
            },
          })
          .then((res) => {
            if (res.data.flag && res.data.data != null) {
              this.userOrderInfo.push(res.data.data);
              this.empty = false;
            } else {
              this.$message({
                showClose: true,
                message: "未查询到该订单！",
                type: "error",
              });
            }
          });
      }
    },
    getAllOrder() {
      this.$http
        .get(this.baseURL + "/order/findByUID", {
          params: {
            id: JSON.parse(sessionStorage.getItem("userinfo")).uid,
          },
        })
        .then((res) => {
          this.userOrderInfo = res.data.data;
          this.empty = false;
        });
    },
    orderStatus(status) {
      if (status == 1) {
        return "交易成功";
      } else if (status == -1) {
        return "交易失败";
      } else if (status == 0) {
        return "审核中";
      } else if (status == 2) {
        return "摇号成功";
      } else {
        return "未知";
      }
    },
  },
};
</script>

<style lang="less" scope>
.ordermain {
  padding: 0 50px;
  .orderinfo {
    border: 2px solid #bbb;
    border-radius: 15px;
    padding: 15px 20px;
    margin-bottom: 15px;
    box-shadow: 3px 3px 9px #999;
  }
}
.el-button {
  padding: 12px 0;
}
.el-row {
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.el-dialog {
  .el-button {
    padding: 12px 10px;
  }
}
.grid-content {
  height: 40px;
  line-height: 40px;
  font-weight: 500;
  padding-left: 10px;
}

.topay {
  display: block;
  cursor: pointer;
  text-align: center;
  color: chocolate;
  font-size: 18px;
  margin: 0 auto;
}
.el-message-box {
  .el-button {
    padding: 12px 5px;
  }
}
</style>